<template>
  <main>
    <!--引入 cateGorymenu 传参-->
    <cateGorymenu></cateGorymenu>
    <div class="container container--zone">
      <div class="region region--full">
        <comImg :imgData="imgData"></comImg>
      </div>
    </div>
    <main id="maincontent">
      <div class="container container--zone">
        <div class="region region--full tabtext">
          <div class="tabtext"></div>
          <!-- <div class="component component--module quick-links">
            引入公共组件 tabText.vue
            
            <tabText
              :listlinkData="listlinkData"
              :moreList="moreList"
              @tabChange="tabChange"
            ></tabText>
          </div> -->
        </div>
        <div class="region region--primary">
          <!-- 引入公共组件面包屑  pageHead.vue-->
          <pageHead :titleData="titleData"></pageHead>

          <!-- 引入封装 头条 -->
          <frontPage
            v-if="isRegion"
            :FrontData="FrontData1"
            :FrontData1="FrontData2"
            :titleName="titleName"
          >
          </frontPage>
          <!-- 指数 暂用 还需要完善 -->
          <markContent v-if="isContent" :tickerData="districtData1"></markContent>
          <!-- <div class="component component--module tickers-bar">
            <div class="column column--full">
              <div class="element element--ticker">
                <div class="overflow--table"></div>

                <div class="content-wrapper">
                  <div class="list list--tickers">
                    <a
                      v-for="(item, index) in districtData1"
                      :key="index"
                      class="ticker__item positive"
                      :href="item.link"
                    >
                      <span class="label">{{ item.district }}</span>
                      <bg-quote class="value">{{ item.exponent }}</bg-quote>
                      <i class="icon icon--caret"></i>
                      逻辑判断为正时显示上箭头 为负时显示下箭头
                      <i class="icon icon--caret"></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
          <!-- 引入公共组件  newsViewer.vue-->
          <newsViewer :newsData="newsData2" :newstitle="newstitle"></newsViewer>
        </div>
        <stickys :sticky="sticky"></stickys>
      </div>

      <div class="container container--zone" role="region">
        <!-- 引入公共组件  marketPlace.vue  We Make-->
        <marketPlace></marketPlace>
        <!-- 引入 MOST POPULAR 组件 -->
        <mastPopular></mastPopular>
      </div>

      <div class="container container--zone" role="region">
        <div class="region region--primary">
          <div class="component component--module text__block">
            <div class="column column--primary">
              <div class="element element--textblock contained">
                <p><b>Get news sent directly to your inbox</b></p>
                <p>
                  Get breaking news and incisive analysis sent to your inbox.
                  Choose from a number of free newsletter options at Sinopoly
                  Watch, including Need to Know, which provides a guide to the
                  trading day.
                </p>
                <p>
                  <a href="">Select a newsletter</a>
                </p>
              </div>
            </div>
          </div>
          <timeTableMk
            v-if="isRegion"
            :timeNewsData="newsData1"
            :titleTime="titleTime"
          ></timeTableMk>
          
        </div>
        <stickys :sticky="sticky"></stickys>
      </div>
    </main>
    <adverTisement></adverTisement>
  </main>
  <footer></footer>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { useLanguageStore } from "@/store/lang";
import cateGorymenu from "@/views/latestNews/cateGorymenu/cateGorymenu.vue"; //头部
import adverTisement from "@/views/home/adverTisement/adverTiseMent";
// import { newsDataArrays } from "@/api/finance.js";
import { newsDataArrays } from "@/api/latest.js";
// 引入公共组件  marketPlace.vue  We Make
import marketPlace from "@/views/latestNews/hotheHeadlines/marketPlace/marketPlace";
import frontPage from "@/views/latestNews/hotheHeadlines/frontPage/frontPage";
// 引入面包屑模块
import pageHead from "@/components/pageHead/pageHead";
import newsViewer from "@/views/latestNews/hotheHeadlines/newsViewer/newsViewer";
// import '@/text.css';
// 引入 MOST POPULAR 组件
import mastPopular from "@/views/home/mastPopular/mastPopular";
// 指数
import markContent from "@/views/market/markContent/markContent";
//
import timeTableMk from "@/views/market/timeTableMk/timeTableMk";

import homeRequest from "@/api/home.js";

import stickys from "@/components/stickys/stickys.vue";
const isRegion = ref(false);

const listlinkData = ref([]);
let titleTime = ref({
  title: "The Wall Street Journal",
  content: "Headlines from The Wall Street Journal",
});
let newstitle = ref({
  title: "",
  content: "",
});
import { onMounted, ref } from "vue";
onMounted(async () => {
  const data = localStorage.getItem("tabMdData");
  listlinkData.value = JSON.parse(data).latest;
  listlinkData.value.forEach((item) => {
    if (item.typeName === "Editors' Picks") {
      item.path = "/latestNews";
    } else if (item.typeName === "Need to Know") {
      item.path = "/needto";
    } else if (item.typeName === "Economic Calendar") {
      item.path = "/economic";
    } else if (item.typeName === "Earnings") {
      item.path = "/earnings";
    } else if (item.typeName === "The Fed") {
      item.path = "/thefed";
    } else if (item.typeName === "Best New Ideas in Money") {
      item.path = "/bestnew";
    } else if (item.typeName === "The Moneyist") {
      item.path = "/moneyist";
    }
  });
  // 刷新时保持数据
  let name = window.sessionStorage.getItem("titleData");
  if (name) {
    titleData.title = JSON.parse(name).typeName;
    titleData.name1 = titleData.title;
  }
  await getNewList();
  await frontData();
  await lastContent();
});
const tabChange = (data) => {
  // 点击Tba切换时存数据
  window.sessionStorage.setItem("titleData", JSON.stringify(data));
  titleData.title = data.typeName;
  titleData.name1 = titleData.title;
};
const titleData = reactive({
  title: "Latest News",
  link: "Home",
  name: "Latest News",
  name1: "",
});

let FrontData = ref([]);
const newsData2 = ref([]);
const newsData1 = ref([]);
function frontData() {
  //新闻列表
  let data = {
    key: "s",
  };
  homeRequest
    .getgroupData(data)
    .then((res) => {
      if (res.code == "0") {
        console.log(111);
        console.log(res);
        FrontData.value = res.data;
        if (FrontData.value.auto !== null) {
          newsData2.value = FrontData.value.auto.news;
          newstitle.value.title = FrontData.value.auto.author;
          // timeNewsData.value = FrontData.value.auto;
        }
        if (FrontData.value.jr !== null) {
          newsData1.value = FrontData.value.jr.news;
          // timeNewsData1.value = FrontData.value.jr;
        }
        isRegion.value = true;
      }
    })
    .catch((e) => {
      console.log("login error", e);
    });
}
// 新闻列表 头部左边大图stcoks关键字部分
let mdList = ref([]);
const FrontData1 = ref([]);
const FrontData2 = ref([]);
const titleName = ref({
  title: "TOP HEADLINES",
  name: "The stories leading the Sinopoly Watch homepage right now.",
});

const getNewList = () => {
  let data = {
    current: 1,
    size: 50,
    isImg: 1,
    key: "stocks",
  };
  homeRequest
    .newsData(data)
    .then((res) => {
      if (res.code == "0") {
        console.log(res);
        mdList.value = res.data.records;
        if (mdList.value.length >= 6) {
          console.log(mdList.value);
          FrontData1.value = mdList.value.slice(0, 2);
          FrontData2.value = mdList.value.slice(2, 6);
          istext.value = true;
        }
        if (mdList.value.length >= 12) {
          console.log(mdList.value);

          istext.value = true;
        }
      }
    })
    .catch((e) => {});
};
const districtData1 = ref([]);
const isContent = ref(false);
function lastContent(){
  let data = {
    key: "stocks",
  };
  homeRequest
    .getTicketData(data)
    .then((res) => {
      if (res.code == "0") {
        console.log(res,'lastContent');
        districtData1.value = res.data;
        isContent.value = true;
      }
    })
    .catch((e) => {});
}
const {
  uscomlinkData,
  newsData3,
  taxesData,
  movementData,
  movementData1,
  movementData2,
  spendingData,
  spendingData1,
  moreData,
  moreData1,
} = newsDataArrays();
const { locale } = useI18n();
const langStore = useLanguageStore();
function submit() {
  ElMessage.success("Hello World！");
}

const handleLangChange = () => {
  locale.value = "en";
  langStore.updateLang("en");
 
};
const imgData = ref("../src/assets/banner.png");
const sticky = ref("../src/assets/ceAdver.png");
</script>

<style scoped>
.tabtext {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* padding: 0 10px; */
  border-top: 1px solid #262626;
  /* border-bottom: 1px solid #262626; */
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-flex-flow: row;
  -ms-flex-flow: row;
  flex-flow: row;
  max-width: 100%;
  height: 10px;
}
</style>
